<template>
	<div class="container-fluid">
		<div class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">组织维度报表</h3>
			</div>
			<el-row>
					<el-col :span="24">
						<collapse-view content="高级搜索">
							<el-form :model="queryParams" label-width="80px" label-position="right" :inline="true" ref="searchForm">
								<el-form-item label="组织名称">
									<el-input v-model="queryParams.name" placeholder="输入组织名称查询" clearable></el-input>
								</el-form-item>
								<el-form-item label="组织编码">
									<el-input v-model="queryParams.code" placeholder="输入组织编码查询" clearable></el-input>
								</el-form-item>

								<el-form-item label="提交时间">
									<el-date-picker
								      v-model="queryParams.created_at"
								      type="datetimerange"
								      value-format="yyyy-MM-dd HH:mm:ss"
								      range-separator="至"
								      start-placeholder="开始日期"
								      end-placeholder="结束日期">
								    </el-date-picker>
								</el-form-item>
								<el-form-item>
									<el-button @click="fetchXunDianShuJus">搜索</el-button>
									<el-button @click="clearSearchForm">清除</el-button>
								</el-form-item>
							</el-form>
						</collapse-view>
					</el-col>
				</el-row>
			<div class="panel-body">
				<el-table :data="collections.data" style="width: 100%" v-loading="loading">
					<el-table-column label="组织名称" prop="name"></el-table-column>
					<el-table-column label="组织编码" prop="code"></el-table-column>
					<el-table-column label="提交次数" prop="xun_dian_ji_lus_num"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button plain size="mini" @click="mingxi(scope.row.id)" icon="el-icon-tickets"></el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 查看明细 -->
				<el-dialog title="查看明细" :visible.sync="dialogVisible">
					<el-row>
						<el-col :span="24">
							<collapse-view content="高级搜索">
								<el-form label-width="70px" label-position="right" :inline="true">

									<el-form-item label="组织名称">
										<el-input v-model="minXiParams.shop_name" placeholder="输入组织名称查询" clearable></el-input>
									</el-form-item>
									<el-form-item>
										<el-button @click="fetchAllXunDian">搜索</el-button>
										<el-button @click="clearSearchTasksForm">清除</el-button>
									</el-form-item>
								</el-form>
							</collapse-view>
						</el-col>
					</el-row>


				  <el-table :data="mingXi.data" v-loading="loadingMinXi">
					<el-table-column prop="shop_name" label="组织名称"></el-table-column>
					<el-table-column prop="shop_code" label="组织编码"></el-table-column>
					<el-table-column prop="user_name" label="提交人"></el-table-column>
					<el-table-column prop="created_at" label="提交时间"></el-table-column>
					</el-table-column>
				  </el-table>
				  <div class="panel-footer text-right">
						<el-pagination @size-change="handleSizeChangeLoading" @current-change="handleCurrentChangeLoading"
													 :current-page="minXiParams.page"
													 :page-sizes="[10, 20, 50, 100]"
													 :page-size="minXiParams.paginate"
													 layout="total, sizes, prev, pager, next, jumper"
													 :total="mingXi.total">
						</el-pagination>
					</div>
				</el-dialog>
			</div>
			<div class="panel-footer text-right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
											 :current-page="queryParams.page"
											 :page-sizes="[10, 20, 50, 100]"
											 :page-size="queryParams.paginate"
											 layout="total, sizes, prev, pager, next, jumper"
											 :total="collections.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../apis'
	import { mapState, mapActions } from 'vuex'
	import Vue from 'vue';

	export default {
		name: "xun-dian-shu-ju",
		data () {
			return {
				// 弹出默认隐藏
				dialogVisible: false,

				// 表格加载动画
				loading: false,

				// 弹出加载动画
				loadingMinXi: false,

				// 巡店数据
				collections: {
					data: [],
					total: 0,
				},

				// 巡店数据明细
				mingXi:{
					data:[],
					total:0,
				},

				// 巡店分页查询信息
				queryParams: {
					page: 1,
					paginate: 10,
					name: '',
					code: '',
					created_at: '',
				},

				// 明细分页查询信息
				minXiParams: {
					shop_id: 0,
					page: 1,
					paginate: 10,
					shop_name: '',
					created_at: '',
				},
			}
		},
		methods: {
			/**
			 * 获取组织数据集合
			 */
			fetchXunDians () {
				this.loading = true;
				api.report.shop_report(this.queryParams).then(response => {
					this.collections = response.data;
					this.loading = false;
				})
			},
			/**
			 * 获取组织数据明细
			 */
			fetchByIDXunDian () {
				this.loadingMinXi = true;
				api.report.shop_xun_dian_ji_lu(this.minXiParams).then(response => {
					this.mingXi = response.data;
					this.loadingMinXi = false;
				})
			},
			/**
			 * 查看明细
			 */
			mingxi (id) {
				this.minXiParams.shop_id = id;
				this.minXiParams.created_at = this.queryParams.created_at;
				this.dialogVisible = true;
				this.fetchByIDXunDian();
			},
			fetchAllXunDian () {
				this.fetchByIDXunDian();
			},
			/**
			 * 清除任务分类查询
			 */
			clearSearchTasksForm () {
				this.minXiParams.shop_name = '';
				this.minXiParams.created_at = '';
			},
			/**
			 * 当改变分页大小时重新获取组织数据
			 */
			handleSizeChange (size) {
				this.queryParams.paginate = size;
				this.fetchXunDians();
			},
			/**
			 * 当改变分页大小时重新获取组织数据
			 */
			handleSizeChangeLoading (size) {
				this.minXiParams.paginate = size;
				this.fetchByIDXunDian();
			},
			/**
			 * 当改变页码时重新获取组织数据
			 */
			handleCurrentChange (index) {
				this.queryParams.page = index;
				this.fetchXunDians();
			},
			/**
			 * 当改变页码时重新获取组织数据
			 */
			handleCurrentChangeLoading (index) {
				this.minXiParams.page = index;
				this.fetchByIDXunDian();
			},
			/**
			 * 搜索查询
			 */
			fetchXunDianShuJus () {
				// console.log(this.queryParams)
				this.fetchXunDians();
			},
			/**
			 * 清空搜索表单
			 */
			clearSearchForm () {
				this.queryParams.shop_name = '';
				this.queryParams.shop_code = '';
				this.queryParams.created_at = '';
				this.queryParams.user_name = '';
			},
		},
		mounted () {
			this.fetchXunDians();
		}
	}
</script>

<style>

</style>
